/**
 * karin 2017/8/18
 * 年检手续办理-上传资料页面,跳转是物理返回
 */
import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import AlipayJSOperation from '../../utils/alipayJSOperation'

// 加载actions
import taxCheckInfoService from '../../services/taxCheckInfoService'
// 加载json
import { defaultData, btns } from '../AnnualInspection/defaultData'

//加载组件
import Common from '../../utils/common'
import PageBar from '../../components/common/pageBar'
import { WhiteSpace, Button } from 'antd-mobile'
import Service from '../../components/common/customerService'

// 加载样式
import Style from './index.scss'


class TaxConfirmUpdata extends Component {
    constructor(props) {
        super(props)
        this.state = {}
        this.carnumber = this.props.params.carnumber //拿参数ID
        this.taxId = this.props.params.key //拿参数ID
        this.mailType = this.props.params.mailType // 拿参数ID
        this.inspectionType = this.props.params.inspectionType // 年检类型：1，免检；2，过线检
    }

    componentWillMount() {
        let htmlTitle = '年检所需资料确认';

        // 添加标题
        document.querySelector("title").innerHTML = defaultData[this.taxId].htmlTitle;
        //隐藏标题栏右键
        AlipayJSOperation.setRightButtonStatus(false);
        //设置标题
        AlipayJSOperation.setTitle(htmlTitle);
        //设置标题颜色
        AlipayJSOperation.setBarColor('#2FB3FE');
        // document.querySelector('title').innerHTML = htmlTitle;
    }

    componentDidMount() { }

    componentWillUnmount() {
        AlipayJSOperation.removeLeftButtonEvent();
    }



    /**
   * 事件
   */
    //按钮点击
    handClick = (i) => {
        if (i==1) {
            // 准备上传资料
            this.context.router.push((`/sendTheAddress/overLine/${this.taxId}`))

        }else {
        window.history.back();
        }
    }


    /**
     * 组件
     */
    render() {

        let btnDom = this.taxId == 1 || this.taxId == 2 ? btns[0] : btns[1]
        let data = defaultData[this.taxId]

        //  console.log(data)
        // 执行
        return (
            <div className={Style.tax + ' darkgray font-28'}>
                <PageBar title={data.htmlTitle} />

                {data.explain.map((item, i) => (
                    <div key={i} className='plr30 pt30'>
                        <p dangerouslySetInnerHTML={{ __html: item.state }}></p>
                        <WhiteSpace size='md' />
                        {item.img.map((img,j) => (<img key={j} src={img} width='100%' height='auto' />))}
                    </div>
                ))}


                <div className='cf' style={{ margin: '0.3rem' }}>

                    {btnDom.map((item, i) => (
                        <Button key={i} type={i ? 'primary' : 'ghost'} size='large'
                            className={!i ? 'fl ' + Style.btnL : 'fr ' + Style.btnR}
                            style={i == 2 ? { width: '30%', marginRight: '5%' } : { width: '30%' }}
                            onClick={() => this.handClick(i)}>{item}</Button>
                    ))}

                </div>

                <WhiteSpace size='lg' />
                <div className={Style.bg}></div>
                <Service rightText='联系客服' />
            </div>
        );
    }
}

// 默认值
TaxConfirm.defaultProps = {}
//使用context
TaxConfirmUpdata.contextTypes = {
    router: React.PropTypes.object.isRequired
}


export default connect()(TaxConfirmUpdata)